<template>
  <div>
    <div class="select_top">
      <el-input v-model="xmData.queryname" clearable @keyup.native.enter="getProjectList" placeholder="请输入项目名称、所属指标"
        style="width:29%;margin:10px 12px 0 0"
      ></el-input>
      <el-select v-model="xmData.assessunit" clearable placeholder="牵头部门" style="width:14%">
        <el-option
          v-for="item in qtSelect"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-select v-model="xmData.orgid" clearable placeholder="责任单位" style="width:14%">
        <el-option
          v-for="item in zrSelect"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-button @click="getProjectList" style="margin-right:40px">检索</el-button>
      <el-button type="primary" @click="ppass">通过</el-button>
      <el-button type="danger" @click="showUnpass=true">驳回</el-button>

    </div>
    <el-table
      ref="multipleTable"
      :data="projectList"
      tooltipEffect="dark"
      style="width: 92%;font-size:13px;margin:0 auto"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nname"
        label="所属指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.lbname"
        label="所属类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.qtbm"
        label="牵头部门"
      >
      </el-table-column>
      <el-table-column
        prop="hash.zrbm"
        label="责任单位"
      >
      </el-table-column>
      <el-table-column
        label="计划日期"
        :formatter="tabTimeFormat"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            @click="changeXM2(scope.row)"
            type="primary"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click="changeXM(scope.row)"
            type="primary"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            @click="deleteProject(scope.row.hash.id)"
            type="primary"
            size="small"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="编辑"
      :visible.sync="showUncheck"
    >
      <editXm :xmid="xmid" ref="child" v-if="isRouterAlive" @changeshowt3="changeshowt3"></editXm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUncheck = false">取 消</el-button>
        <el-button type="primary" @click="savechangeXM">修 改</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="查看"
      :visible.sync="showUncheck2"
    >
      <checkxm :xmid="xmid" ref="child2" v-if="isRouterAlive"></checkxm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUncheck2 = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提交驳回"
      :visible.sync="showUnpass"
    >
      <el-form labelWidth="140px">
        <el-form-item label="驳回原因">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入驳回原因"
            v-model="premark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUnpass = false">取 消</el-button>
        <el-button type="primary" @click="unpass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import editXm from '~/components/common/editXm.vue';
import checkxm from '~/components/common/checkxm.vue';

export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      ts: this.newStore(),
      showUncheck: false,
      showUncheck2: false,
      isRouterAlive: true,
      value6: '',
      premark: '',
      xmData: [],
      xmid: '',
      qtSelect: [],
      zrSelect: [],
      projectList: [],
      selectedProject: [],
      selectedId: [],
      showUnpass: false,
    };
  },
  components: {
    editXm,
    checkxm,
  },
  created() {
    this.getqtList();
    this.getProjectList();
    this.getzrList();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    handleCurrentChange(val) {
      this.getProjectList();
    },
    savechangeXM() {
      this.$refs.child.savechangeXM();
    },
    changeXM(item) {
      this.reload();
      this.showUncheck = true;
      this.xmid = item.hash.id;
    },
    changeshowt3(val) {
      this.showUncheck = val;
    },
    changeXM2(item) {
      this.reload();
      this.showUncheck2 = true;
      this.xmid = item.hash.id;
    },
    goPage2() {
      if (this.$route.path == '/performance/assess') {
        this.$router.push('assess2');
      } else {
        this.$router.push('grade2');
      }
    },
    // 获取牵头部门列表
    getqtList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '1',
        start: '0',
        limit: '1000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.qtSelect = ts.d.data.operation1;
      });
    },
    // 获取责任部门列表
    getzrList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '2',
        start: '0',
        limit: '1000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zrSelect = ts.d.data.operation1;
      });
    },
    // 获取项目列表
    getProjectList() {
      this.xmData.handle = '2E8E7DE13E3E62949CFDA5DB7E2B76807763A9BB3390022CC3633CA4D2BCBCC5';
      this.xmData.start = (this.currentPage3 - 1) * this.pagesize;
      this.xmData.limit = this.currentPage3 * this.pagesize;

      this.spost(this.ts, '/mainservlet', this.xmData).then((ts) => {
        this.projectList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    // 表格里计划日期格式化
    tabTimeFormat(row, column) {
      const begindate = row.hash.begindate.replace(/\-/g, '/');
      const enddate = row.hash.enddate.replace(/\-/g, '/');
      const data = `${begindate}~${enddate}`;
      return data;
    },
    // 删除项目
    deleteProject(projectid) {
      this.$confirm('确定要删除此项目吗?', '提示', {
      }).then(() => {
        const req = {
          handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680DE4F6387678D78DC2D51C9A12806E8B1',
          id: projectid,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message('删除成功!');
          this.getProjectList();
        });
      });
    },
    // 审核批量通过
    ppass() {
      this.getSelectedId();
      if (this.selectedId.length == 0) {
        this.$message.error('必须勾选一条才能进行审批');
        return;
      }
      this.$confirm('确定审批通过这些项目?', '提示', {
      }).then(() => {
        const req = {
          handle: '2E8E7DE13E3E62949CFDA5DB7E2B76807E8245F15BAAD64A505AD58E69C30439',
          id: this.selectedId,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message('操作成功!');
          this.getProjectList();
        });
      });
    },
    // 审核批量不通过
    unpass() {
      this.getSelectedId();
      if (this.selectedId.length == 0) {
        this.$message.error('必须勾选一条才能进行驳回');
        this.showUnpass = false;
        return;
      }
      this.$confirm('确定审批驳回这些项目?', '提示', {
      }).then(() => {
        const req = {
          handle: '2E8E7DE13E3E62949CFDA5DB7E2B76800ED45CAAD120F987C5F618CC3AF2C697',
          id: this.selectedId,
          premark: this.premark,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message('操作成功!');
          this.getProjectList();
          this.showUnpass = false;
        });
      });
    },
    // 获取勾选的id的方法
    getSelectedId() {
      this.selectedId = [];
      for (let i = 0; i < this.selectedProject.length; i++) {
        this.selectedId.push(this.selectedProject[i].hash.id);
      }
    },
    // 勾选触发的方法
    handleSelectionChange(val) {
      this.selectedProject = val;
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
